﻿@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}

@section css {
    <link href="~/Assets/css/searchmodal.css" rel="stylesheet" />
    <style>
        .imgicon {
            width: 3.2rem
        }


        .chart {
            height: 200px;
            margin: 0px;
            padding: 0px;
        }

        h5 {
            margin-top: 30px;
            font-weight: bold;
        }

            h5:first-child {
                margin-top: 15px;
            }

        .chart_title {
            font-weight: bold;
            margin: 5px;
            padding: 5px;
            border-bottom: 1px #CCCCCC solid;
        }
    </style>
}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a id="menu-btn" class="mui-action-menu mui-icon mui-icon-search mui-pull-right"></a>
    <h1 class="mui-title" style="color:white;">问题总览</h1>
</header>
<div class="mui-content" ng-cloak ng-controller="HomeChartsController" ng-init="GetCheckYearList();SearchModel={};SearchModel.Year = '@DateTime.Now.Year';InitHiddenTroubleReport(SearchModel);">
    <div class="mui-content-padded">
        <div class="mui-card">
            <p class="chart_title">问题状态占比</p>
            <div id="stateview" class="chart">
            </div>
        </div>

        <div class="mui-card">
            <p class="chart_title">问题所属园区占比</p>
            <div id="parkview" class="chart">
            </div>
        </div>

        <div class="mui-card">
            <p class="chart_title">问题责任部门占比</p>
            <div id="departmentview" class="chart">
            </div>
        </div>

        <div class="mui-card">
            <p class="chart_title">问题等级占比</p>
            <div id="levelview" class="chart">
            </div>
        </div>

        <div class="mui-card">
            <p class="chart_title">问题类型占比</p>
            <div id="typeview" class="chart">
            </div>
        </div>
        <div class="mui-card">
            <p class="chart_title">部门问题状态</p>
            <div class="chart" style="height:auto;">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-collapse" ng-repeat="x in DepReportList">
                        <a class="mui-navigate-right">
                            {{x.DepartmentName}}<br />
                                                <span ng-repeat="s in x.StatusList"> {{s.StateName}}：<b>{{s.Count}}</b></span>
                        </a>
                        <div class="mui-collapse-content">
                            <div ng-repeat="y in x.PlaceList">
                                <h5 style="color:black; margin-top:10px;">{{$index+1}}.{{y.PlaceName}}</h5>
                                <p>
                                    <span ng-repeat="z in y.StatusList"> {{z.StateName}}：<span class="mui-badge mui-badge-primary">{{z.Count}}</span></span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div style="height:50px;">

        </div>
    </div>

    <div id="menu-wrapper" class="menu-wrapper hidden" ng-init="">
        <div id="menu" class="menu">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>年份</label>
                    <select  ng-model="SearchModel.Year">
                        <option ng-repeat="x in CheckYearList" value="{{x}}">{{x}}</option>
                    </select>
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" onclick="toggleMenu();" ng-click="InitHiddenTroubleReport(SearchModel);">确认</button>
                </div>
            </form>
        </div>
    </div>
    <div id="menu-backdrop" class="menu-backdrop"></div>
</div>

@section js{
    <script src="~/Assets/js/base/echart.min.js"></script>
    <script src="~/Assets/js/pg/HomeChart.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>
    <script>
        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });

        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");

        backdrop.addEventListener('tap', toggleMenu);
        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        //document.getElementById("icon-menu").addEventListener('tap', toggleMenu)
        //下沉菜单中的点击事件
        mui('#menu').on('tap', 'a', function () {
            toggleMenu();
            info.innerHTML = '你已选择：' + this.innerHTML;
        });
        var busying = false;

        function toggleMenu() {
            if (busying) {
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function () {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
            }
            setTimeout(function () {
                busying = false;
            }, 500);
        }
    </script>
}